<!--
 * @Author: fanyaqing
 * @Date: 2021-08-08 11:25:00
 * @LastEditTime: 2021-08-11 14:35:02
 * @LastEditors: fanyaqing
 * @Description: 
 * @FilePath: \supermall\src\components\common\scroll\Scroll.vue
-->
<template>
  <div class="wrapper" ref="wrapper">
    <div class="content">
      <slot>

      </slot>
    </div>
  </div>
</template>
<script>
import BetterScroll from 'better-scroll';
export default {
  props:{
    probeType:{
      type:Number,
      default:0
    },
    pullUpLoad:{
      type:Boolean,
      default:false
    }
  },
  data() {
    return {
      scroll:null
    }
  },
  mounted(){
    // 使用this.$refs.wrapper，而不使用document.querySelector('.wrapper')
    // 防止有相同wrapper的类名字，而相互影响，导致取到的不是当前的wrapper
    /*
      probe侦测，
      0，1都是不侦测实时的位置
      2，在手指滚动的过程中侦测，手指离开后的惯性滚动过程中不侦测
      3，只要在滚动就监测
    */
    //1.创建bs对象  
    this.scroll=new BetterScroll(this.$refs.wrapper,{
      probeType:this.probeType,
      click:true,
      pullUpLoad:this.pullUpLoad,
      observeDOM:true
    })
    // 2.监听bs事件
    // 2.1 监听位置
    if(this.probeType===2||this.probeType===3){
      this.scroll.on('scroll',(position)=>{
        this.$emit('scrollPosition',position)
      })
    }
    
    // 2.2 加载更多
    if(this.pullUpLoad){
      this.scroll.on('pullingUp',()=>{
        this.$emit('pullingUp')
      })
    }
  },
  methods:{
    /*
    当图片加载的很快的时候，mounted中的scroll对象可能还没加载出来，导致refresh方法找不到报错，
    为了解决这个问题，在方法前加上scroll属性，如果scroll有值才执行方法，
    */ 
    // 位置滚动
    scrollTop(x,y,time=500){
      this.scroll&&this.scroll.scrollTo(x,y,time)
    },
    // 每次下拉加载后，都要执行一次，才算完成一次下拉加载
    finish(){
      this.scroll&&this.scroll.finishPullUp();
    },
    // 重新计算，betterScroll的可滚动的高度
    refresh(){
      this.scroll&&this.scroll.refresh();
      console.log('refresh')
    },
    // 获取滚动的y值
    getScrollY(){
      return this.scroll?this.scroll.y:0
    }
  }
}
</script>
<style scoped>

</style>
